<template>
  <div class="">
    <h1 align="center" style="font-size: 30px">个人信息展示</h1>
    <table class="myTable">
      <tr style="border-top: 1px solid #505458">
        <th><i class="el-icon-eleme"> </i><span>用户名:</span></th>
        <th>{{userInfo.name}}</th>
      </tr>
      <tr>
        <th><i class="el-icon-user"></i><span>昵称</span></th>
        <th>{{userInfo.nickname}}</th>
      </tr>
      <tr>
        <th><i class="el-icon-s-help"> </i><span>性别</span></th>
        <th>{{userInfo.sex===1?'男':'女'}}</th>
      </tr>
      <tr>
        <th><i class="el-icon-star-off"> </i><span>邮箱</span></th>
        <th>{{userInfo.email}}</th>
      </tr>
      <tr>
        <th><i class="el-icon-phone"> </i><span>电话</span></th>
        <th>{{userInfo.phone}}</th>
      </tr>
      <tr>
        <th><i class="el-icon-picture-outline"> </i><span>头像</span></th>
        <th>
          <el-avatar :size="150" :src="userInfo.header"></el-avatar>
        </th>
      </tr>
      <tr style="margin: 0px auto;padding: 0px 15px">
        <th colspan="2">
          <el-button type="primary" @click="openDialog">编辑个人信息</el-button>
        </th>
      </tr>
    </table>
    <el-dialog title="编辑个人信息" :visible.sync="dialogFormVisible">
      <el-form :model="userInfo">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="userInfo.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth">
          <el-input v-model="userInfo.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="userInfo.sex" placeholder="请您的性别">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="userInfo.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="userInfo.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="头像" :label-width="formLabelWidth">
          <el-upload
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            action="http://localhost:8084/uploadCover"
            class="avatar-uploader">
            <img :src="userInfo.header" width="120px">
            <el-button type="primary" round>点击修改头像</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
  <!--<div>

  </div>-->
</template>
<script>
// eslint-disable-next-line no-unused-vars
import background from '../../assets/css/background.css'
export default {
  name: 'UserInfo',
  data () {
    return {
      a: 'a',
      userInfo: {},
      dialogFormVisible: false,
      formLabelWidth: '100px'
    }
  },
  created () {
    /* his.test=this.$parent.test
    this.userInfo=this.$parent.userInfo */
    this.getUserInfo()
  },
  methods: {
    getUserInfo () {
      const _this = this
      const id = JSON.parse(localStorage.getItem('userInfo')).userId
      this.$axios.get('/info/' + id)
        .then((res) => {
          _this.userInfo = res.data.data
        })
    },
    openDialog () {
      this.dialogFormVisible = true
    },
    submit () {
      this.$axios
        .post('/user/updateUser', this.userInfo).then(response => {
          if (response.data.code === '200') {
            this.$message.success(response.data.msg)
            this.getUserInfo()
          } else {
            this.$message.success(response.data.msg)
          }
        })
      this.dialogFormVisible = false
    },
    handleAvatarSuccess (res, file) {
      console.log(888)// 上传响应
      this.userInfo.header = res
    },
    // 图片上传之前调用
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 1
      console.log(866)// 上传响应
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 1MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>
<style>
  .myTable {
    font-size: 25px;
    width: 100%;
    border-collapse: collapse;
    border: none;
  }

  th {
    padding: 15px;
    border: solid #000 1px;
  }

  tr {
    border-bottom: 1px solid #505458;
  }
</style>
